<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script th:src="@{/layui/layui.js}" type="text/javascript"></script>
    <link th:href="@{/layui/css/layui.css}" rel="stylesheet" />
</head>
<body>
<div class="layui-container" style="margin: 10px 0px; ">
    <form class="layui-form layui-form-pane">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">商品类目</label>
                <div class="layui-input-inline" style="width: 225px;">
                    <!--<input type="radio" name="checkPid" lay-filter="checkPid" value="0" title="一级类目" checked/>
                    <input type="radio" name="checkPid" lay-filter="checkPid" value="1" title="子类目" />-->

                </div>
                <div class="layui-input-inline">
                    <input type="hidden" name="pid" id="parentId"/>
                    <input type="hidden" id="pid"/>

                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">类目名称</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input" id="name" name="name" />
            </div>
        </div>
        <div id="gradeEj" class="layui-form-item">
            <label class="layui-form-label">级别</label>
            <div class="layui-input-inline">
                <select id="gradeTwo" name="gradeTwo" lay-filter="gradeTwo">
                    <option value=""></option>
                    <option value="0" pid="0">一级类目</option>
                    <option value="1">二级类目</option>
                </select>
            </div>
        </div>
        <div id="gradeYj" class="layui-form-item" style="display: none;" >
            <label class="layui-form-label">一级类目</label>
            <div class="layui-input-inline">
                <select name="gradeOne" id="gradeOne" lay-filter="gradeOne">
                    <option value=""></option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">关键字</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" id="keyWord" name="keyWord" />
                </div>
            </div>
        </div>
        <input type="hidden" id="photoPath" name="photoPath">
        <div class="layui-form-item" style="text-align: left">
            <div class="layui-input-block">
                <a class="layui-btn layui-btn-normal" id="checkPhoto" style="width: 200px">选择类目图片</a>
                <div class="layui-upload-list">
                    <img class="layui-upload-img" id="photo">
                </div>
                <div>
                    <div class="layui-progress layui-progress-big" lay-showpercent="yes"
                         lay-filter="photoProgress"  style="width: 200px">
                        <div class="layui-progress-bar layui-bg-blue" lay-percent="0%"></div>
                    </div>
                </div>
            </div>
        </div>
        <input type="hidden" id="iconPath" name="iconPath">
        <div class="layui-form-item" style="text-align: left">
            <div class="layui-input-block">
                <a class="layui-btn layui-btn-normal" id="checkIcon" style="width: 200px" >选择类目图标</a>
                <div class="layui-upload-list">
                    <img class="layui-upload-img" id="icon">
                </div>
                <div>
                    <div class="layui-progress layui-progress-big" lay-showpercent="yes"
                         lay-filter="photoProgress"  style="width: 200px">
                        <div class="layui-progress-bar layui-bg-blue" lay-percent="0%"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">类目简介</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input" id="introduction" name="introduction" />
            </div>
        </div>

        <div class="layui-form-item" style="display: none;">
            <div class="layui-input-block">
                <a class="layui-btn" id="submitBtn" lay-submit="" lay-filter="submitBtn">提交</a>
            </div>
        </div>
    </form>
</div>
<script>

    var $,form;
    layui.config({
        base:'/js/'
    })
    layui.use(['form','jquery','upload','element','layer','treeTable','table'],function(){
        var elem = layui.element,
            upload = layui.upload
            layer = layui.layer,
            treeTable = layui.treeTable,
            table = layui.table;
        $ = layui.jquery;
        form = layui.form;


        findPid();


        upload.render({
            elem:'#checkPhoto',
            url:'/file/fc/fileUpload',
            before: function (obj) {
                obj.preview(function (i,f,r) {
                    $('#photo').attr('src',r);
                });
                elem.progress('photoProgress','0%');
            },
            done:function (res) {
                if(!res.is){
                    layer.alert('上传失败，请稍后再试......')
                }else{
                    $('#photoPath').val(res.file.id);
                }
            },
            error:function(){

            },
            progress:function (n,el,e) {
                elem.progress('photoProgress',n+'%');
                if(n==100){
                    layer.msg('上传完成!',{photo:1});
                }
            }
        })

        form.on('submit(submitBtn)',function (data) {
            var formData = data.field;
            formData.pid= formData.gradeOne;
            console.log(formData);
            $.ajax({
                type:'post',
                url:'/ic/add',
                data:formData,
                dataType:'json',
                success:function (result) {
                    layer.msg(result.msg);
                    if(result.is){
                        let index = parent.layer.getFrameIndex(window.name);
                        parent.layer.close(index);//关闭父页面窗口
                    }
                }
            })
        })



        function  findPid(type,name,tip,pid){
            $.ajax({
                type: 'post',
                url:'/ic/findParent',
                data:{
                    pid:pid,
                    type:type,
                    limit:100
                },
                dataType:'json',
                success:function (res){
                    var obj=$('#'+name);
                    //清空里面内容
                    $(obj).empty().append('<option value="">请选择'+tip+'</option>');
                    $.each(res.data,function (i,data){
                        var	option='<option id="pid" value="'+data.id+'">'+data.name+'</option>';
                        $(obj).append(option);
                        form.render('select');//指定表单刷新
                    })
                }
            })
        }




        form.on('select(gradeTwo)',function (data){
            if (data.value==0){
                $('#gradeYj').hide();
            }else if(data.value==1){
                $('#gradeYj').show();
                findPid(2,'gradeOne','一级类目',0);

            }
        })

            upload.render({
                elem: '#checkIcon',
                url: '/file/fc/fileUpload',
                before: function (obj) {
                    obj.preview(function (i, f, r) {
                        $('#photo').attr('src', r);
                    });
                    elem.progress('photoProgress', '0%');
                },
                done: function (res) {
                    if (!res.is) {
                        layer.alert('上传失败，请稍后再试......')
                    } else {
                        $('#photoPath').val(res.file.id);
                    }
                },
                error: function () {

                },
                progress: function (n, el, e) {
                    elem.progress('photoProgress', n + '%');
                    if (n == 100) {
                        layer.msg('上传完成!', {icon: 1});
                    }
                }
            })
        });



    function btnSubmit() {
        $('#submitBtn').click();
    }
</script>
</body>
</html>
